<template>
  <view class="fee-table">
    <!-- 表头 -->
    <view class="fee-table_th">
      <view>费用名称</view>
      <view>费用金额</view>
      <view v-if="mode == 'detail'">生成节点</view>
      <view v-if="mode == 'detail'">待结金额</view>
      <view v-if="mode == 'detail'">实结金额</view>
      <view>费用备注</view>
      <view>结算备注</view>
    </view>
    <view class="tbody">
      <!-- 1级 -->
      <view class="tr">
        <view @click="openFlod(data)">
          <text style="margin-right: 12rpx">{{ data.feeName }}</text>
          <template v-if="feeDetailList.length">
            <ve-icon v-if="data.open" name="arrow_bottom" size="28" />
            <ve-icon v-else name="arrow_top" size="28" />
          </template>
        </view>
        <!-- 正负值 -->
        <view>{{ numFormatThousands(data.activeTotalAmount) }}</view>
        <view v-if="mode == 'detail'">{{ data.createNodeName }}</view>
        <view v-if="mode == 'detail'">{{ numFormatThousands(data.waitPayAmount) }}</view>
        <view v-if="mode == 'detail'">{{ numFormatThousands(data.payAmount) }}</view>
        <view @click="toastRemark(data.remark)">{{ data.remark }}</view>
        <view @click="toastRemark(data.settlementRemark)">{{ data.settlementRemark }}</view>
      </view>
      <!-- 2级， 3级 -->
      <view class="child-table" v-if="feeDetailList && feeDetailList.length > 0 && !data.open">
        <!-- 2级 -->
        <block v-for="(el, elindex) in feeDetailList" :key="elindex">
          <view class="twice">
            <view @click="openFlod(el)">
              <text style="margin-right: 12rpx">{{ el.type == 0 ? el.feeCategoryName : el.itemName }}</text>
              <template v-if="el.childrenList.length">
                <ve-icon v-if="el.open" name="arrow_bottom" size="28" />
                <ve-icon v-else name="arrow_top" size="28" />
              </template>
            </view>
            <!-- 正负值 -->
            <view>{{ numFormatThousands(el.activeAmount) }}</view>
            <view v-if="mode == 'detail'">{{ el.createNodeName }}</view>
            <view v-if="mode == 'detail'">{{ el.waitPayAmount }}</view>
            <view v-if="mode == 'detail'">{{ el.payAmount }}</view>
            <view>{{ el.remark }}</view>
            <view>{{ el.settlementRemark }}</view>
          </view>
          <!-- 3级 -->
          <block v-if="el && el.childrenList && el.childrenList.length > 0 && !el.open">
            <view class="third" v-for="pl in el.childrenList" :key="pl.id">
              <view>{{ pl.itemName }}</view>
              <!-- 正负值 -->
              <view>{{ numFormatThousands(pl.activeAmount) }}</view>
              <view>{{ pl.createNodeName }}</view>
              <view>{{ pl.waitPayAmount }}</view>
              <view>{{ pl.payAmount }}</view>
              <view>{{ pl.remark }}</view>
              <view>{{ pl.settlementRemark }}</view>
            </view>
          </block>
        </block>
      </view>
    </view>

    <ve-toast ref="toastRef" />
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { numFormatThousands } from '@/vehicle-ui/utils/tools.js'

  const props = defineProps({
    data: Object,
    mode: {
      type: String,
      default: 'detail',
    },
  })

  const feeDetailList = ref([])
  if (props.data.feeDetailList) {
    feeDetailList.value = props.data.feeDetailList
  }

  // 展开收起逻辑
  const openFlod = (item) => {
    item.open = !item.open //1级
    if (item.feeDetailList) {
      item.feeDetailList.forEach((chlid) => {
        chlid.open = false //2级
      })
    }
  }

  const toastRef = ref()
  const toastRemark = (text) => {
    if (text) {
      uni.showModal({
        title: '备注',
        content: text,
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        },
      })
    }
  }
</script>

<style lang="scss" scoped>
  .fee-table {
    margin-top: 24rpx;
    overflow-x: scroll;
    background: #f7f8fa;
    border: 1px solid #f7f8fa;

    &_th {
      height: 88rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #8491a8;
      font-size: 24rpx;
      view {
        flex-shrink: 0;
      }
      view:nth-child(1) {
        width: 260rpx;
        margin-left: 24rpx;
      }
      view:nth-child(2) {
        width: 160rpx;
      }
      view:nth-child(3) {
        width: 160rpx;
      }
      view:nth-child(4) {
        width: 160rpx;
      }
      view:nth-child(5) {
        width: 160rpx;
      }
      view:nth-child(6),
      view:nth-child(7) {
        width: 160rpx;
      }
    }

    .tbody {
      padding: 12rpx 24rpx 24rpx;
      width: fit-content;
      min-width: 100%;
      background: #fff;
      .tr {
        width: 100%;
        padding: 24rpx 0 16rpx;
        background: #ffffff;
        display: flex;
        justify-content: flex-start;
        // align-items: center;
        color: #191c27;
        font-size: 28rpx;
        view {
          flex-shrink: 0;
        }
        view:nth-child(1) {
          width: 260rpx;
        }
        view:nth-child(2) {
          width: 160rpx;
        }
        view:nth-child(3) {
          width: 160rpx;
        }
        view:nth-child(4) {
          width: 160rpx;
        }
        view:nth-child(5) {
          width: 160rpx;
        }
        view:nth-child(6),
        view:nth-child(7) {
          width: 160rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .child-table {
      .twice {
        padding-bottom: 24rpx;
        background: #f7f8fa;
        display: flex;
        justify-content: flex-start;
        // align-items: center;
        color: #191c27;
        font-size: 28rpx;
        view:nth-child(1) {
          width: 260rpx;
          padding-left: 24rpx;
        }
        view:nth-child(2) {
          width: 160rpx;
        }
        view:nth-child(3) {
          width: 160rpx;
        }
        view:nth-child(4) {
          width: 160rpx;
        }
        view:nth-child(5) {
          width: 160rpx;
        }
        view:nth-child(6),
        view:nth-child(7) {
          width: 160rpx;
        }

        &:first-child {
          padding-top: 24rpx;
        }
      }
      .third {
        background: #f7f8fa;
        padding-bottom: 24rpx;
        display: flex;
        justify-content: flex-start;
        // align-items: center;
        color: #191c27;
        font-size: 28rpx;
        view:nth-child(1) {
          width: 260rpx;
          padding-left: 46rpx;
        }
        view:nth-child(2) {
          width: 160rpx;
        }
        view:nth-child(3) {
          width: 160rpx;
        }
        view:nth-child(4) {
          width: 160rpx;
        }
        view:nth-child(5) {
          width: 160rpx;
        }
        view:nth-child(6),
        view:nth-child(7) {
          width: 160rpx;
        }
      }
    }
  }
</style>
